<template>
	<view >
		<view class="d-flex" @click="seletShowPop">
			<u--input
			customStyle="flex:1"
					:value="dataValue"
					v-on:input="$emit('input',$event.target.value)"
					disabled
					disabledColor="#ffffff"
					:placeholder="`请选择${label}`"
					border="none"
					
			></u--input>
			<u-icon
					slot="right"
					name="arrow-right"
			></u-icon>
		</view>
		<u-picker :show="show" :keyName="keyName" :columns="columns" @cancel="closeShow" @confirm="seletWays"></u-picker>
	</view>
</template>

<script>
	export default{
		props: {
			columns: {
				type: Array,
				default: []
			},
			label:{
				type:String,
				default:''
			},
			keyName:{
				type:String,
				default:''
			},
			value:{
				type:String,
				default:''
			},
		},
		data() {
			return {
				show: false,
				dataValue:undefined,
			};
		},
		watch:{
			value:{
				handler(newVal){
					if(newVal){
						let obj = this.columns.filter(item=>item.id===newVal)
						if(obj.id) this.dataValue = obj[this.keyName]
					}
				}
			}
		},
		created(){
		},
		methods:{
			seletShowPop(){
				this.show = true
				uni.hideKeyboard()
			},
			seletWays(e){
				this.dataValue = e.value[0][this.keyName]
				this.$emit('input',e.value[0].id)
				console.log(this.$parent)
				this.show = false
			},
			closeShow(){
				this.show = !this.show
			},
			
		}
	}
</script>

<style scoped>
	.picker-box{
		display: initial;
	}
/deep/ .u-popup{
		display: initial !important;
	}
	.input-box{
		display: flex;
	}
	uni-picker-view {
	  display: block;
	}
	uni-picker-view .uni-picker-view-wrapper {
	  display: flex;
	  position: relative;
	  overflow: hidden;
	  height: 100%;
	  background-color: white;
	}
</style>